<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文案管理系统</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        /* 全局样式 */
        body {
            background-color: #f8f9fa;
            padding-top: 20px;
            padding-bottom: 40px;
        }
        .container-main {
            max-width: 1200px;
            margin: 0 auto;
        }
        .card-shadow {
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.08);
            border-radius: 10px;
            border: none;
        }
        .section-header {
            border-bottom: 2px solid #0d6efd;
            padding-bottom: 12px;
            margin-bottom: 20px;
            position: relative;
        }
        .section-header:after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 100px;
            height: 2px;
            background: #0dcaf0;
        }

        /* 导航菜单样式 */
        .nav-card {
            background: linear-gradient(135deg, #ffffff, #f1f8ff);
            border-radius: 10px;
            overflow: hidden;
            transition: all 0.3s ease;
            height: 100%;
        }
        .nav-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 1rem 2rem rgba(0, 123, 255, 0.15);
        }
        .nav-card .card-body {
            padding: 25px 20px;
        }
        .nav-icon {
            font-size: 2.5rem;
            margin-bottom: 15px;
            color: #0d6efd;
            background: rgba(13, 110, 253, 0.1);
            width: 70px;
            height: 70px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 20px;
        }
        .nav-card:hover .nav-icon {
            background: rgba(13, 110, 253, 0.2);
            transform: scale(1.1);
        }

        /* 表单样式 */
        .form-card {
            background: #ffffff;
            border-radius: 10px;
            padding: 25px;
        }
        .form-label {
            font-weight: 600;
            margin-bottom: 8px;
            color: #495057;
        }
        .btn-action {
            padding: 10px 25px;
            font-weight: 600;
            border-radius: 8px;
            transition: all 0.3s;
        }
        .btn-action:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        /* 响应式调整 */
        @media (max-width: 768px) {
            .nav-card {
                margin-bottom: 20px;
            }
        }

        /* 退出按钮样式 */
        .logout-container {
            position: absolute;
            top: 20px;
            right: 20px;
            z-index: 1000;
        }
        .logout-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: rgba(220, 53, 69, 0.1);
            color: #dc3545;
            border: none;
            transition: all 0.3s ease;
        }
        .logout-btn:hover {
            background: #dc3545;
            color: white;
            transform: rotate(15deg);
        }
        .logout-btn .tooltip-text {
            visibility: hidden;
            width: 80px;
            background-color: #555;
            color: #fff;
            text-align: center;
            border-radius: 6px;
            padding: 5px;
            position: absolute;
            z-index: 1;
            bottom: 125%;
            left: 50%;
            margin-left: -40px;
            opacity: 0;
            transition: opacity 0.3s;
            font-size: 12px;
        }
        .logout-btn:hover .tooltip-text {
            visibility: visible;
            opacity: 1;
        }

        /* 顶部标题区域调整 */
        .header-container {
            position: relative;
            padding-top: 10px;
            padding-bottom: 20px;
        }
    </style>
</head>
<body>
<div class="container container-main">
    <!-- 顶部标题 -->
    <div class="text-center mb-5 header-container">
        <!-- 退出登录按钮 -->
        <div class="logout-container">
            <button class="logout-btn" id="logoutBtn" onclick="logout();" title="退出登录">
                <i class="fas fa-sign-out-alt"></i>
                <span class="tooltip-text">退出登录</span>
            </button>
        </div>

        <h1 class="display-5 fw-bold text-primary">
            <i class="fas fa-file-alt me-2"></i>视频文案管理系统
        </h1>
        <p class="lead text-muted">高效管理您的短视频文案内容，优化工作流程</p>
    </div>

    <!-- 功能导航区 -->
    <div class="row mb-5">
        <div class="col-md-4 mb-4">
            <div class="nav-card card-shadow h-100">
                <div class="card-body text-center">
                    <div class="nav-icon">
                        <i class="fas fa-bullhorn"></i>
                    </div>
                    <h3 class="card-title mb-3">文本转口播</h3>
                    <p class="card-text text-muted">
                        将文本内容转换为语音口播，快速生成音频内容，支持多种语音风格选择。
                    </p>
                    <button class="btn btn-primary btn-action mt-3" onclick="location.href='/plScriptgen/toText2video'">
                        <i class="fas fa-play-circle me-2"></i>开始转换
                    </button>
                </div>
            </div>
        </div>

        <div class="col-md-4 mb-4">
            <div class="nav-card card-shadow h-100">
                <div class="card-body text-center">
                    <div class="nav-icon">
                        <i class="fas fa-file-alt"></i>
                    </div>
                    <h3 class="card-title mb-3">视频文案列表</h3>
                    <p class="card-text text-muted">
                        查看提交的生成视频的文案，查看进度。
                    </p>
                    <button class="btn btn-success btn-action mt-3" onclick="location.href='/plScriptgen'">
                        <i class="fas fa-sliders-h me-2"></i>文案列表
                    </button>
                </div>
            </div>
        </div>

        <div class="col-md-4 mb-4">
            <div class="nav-card card-shadow h-100">
                <div class="card-body text-center">
                    <div class="nav-icon">
                        <i class="fas fa-user-lock"></i>
                    </div>
                    <h3 class="card-title mb-3">修改密码</h3>
                    <p class="card-text text-muted">
                        更新您的账户密码，增强账户安全性，建议定期修改密码。
                    </p>
                    <button class="btn btn-info btn-action mt-3" data-bs-toggle="modal" data-bs-target="#passwordModal">
                        <i class="fas fa-key me-2"></i>修改密码
                    </button>
                </div>
            </div>
        </div>
    </div>

</div>

<!-- 修改密码模态框 -->
<div class="modal fade" id="passwordModal" tabindex="-1" aria-labelledby="passwordModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title" id="passwordModalLabel">
                    <i class="fas fa-key me-2"></i>修改登录密码
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="mb-3">
                        <label class="form-label">当前密码</label>
                        <div class="input-group">
                            <input type="password" class="form-control" placeholder="请输入当前密码">
                            <button class="btn btn-outline-secondary" type="button">
                                <i class="fas fa-eye"></i>
                            </button>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">新密码</label>
                        <div class="input-group">
                            <input type="password" class="form-control" placeholder="请输入新密码">
                            <button class="btn btn-outline-secondary" type="button">
                                <i class="fas fa-eye"></i>
                            </button>
                        </div>
                        <div class="form-text">密码至少8位，包含字母和数字</div>
                    </div>

                    <div class="mb-4">
                        <label class="form-label">确认新密码</label>
                        <div class="input-group">
                            <input type="password" class="form-control" placeholder="请再次输入新密码">
                            <button class="btn btn-outline-secondary" type="button">
                                <i class="fas fa-eye"></i>
                            </button>
                        </div>
                    </div>

                    <div class="d-grid">
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save me-1"></i>确认修改
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- 引入Bootstrap JS -->
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script>

<script>
    // 密码可见性切换
    document.querySelectorAll('.btn-outline-secondary').forEach(button => {
        button.addEventListener('click', function() {
            const input = this.previousElementSibling;
            if (input.type === 'password') {
                input.type = 'text';
                this.innerHTML = '<i class="fas fa-eye-slash"></i>';
            } else {
                input.type = 'password';
                this.innerHTML = '<i class="fas fa-eye"></i>';
            }
        });
    });

    // 表单提交处理
    document.querySelectorAll('form').forEach(form => {
        form.addEventListener('submit', function(e) {
            e.preventDefault();
            alert('操作已成功提交！');
            if (this.closest('.modal')) {
                const modal = bootstrap.Modal.getInstance(document.getElementById('passwordModal'));
                modal.hide();
            }
        });
    });

    // 退出登录功能
    function logout() {
        window.location.href = '/login';
    }
</script>
</body>
</html>